{% extends "base.html" %}
{% load staticfiles %}

{% block title %}权限列表{% endblock %}

{% block styles %}
    <style>

        .user-active {
            color: red;
        }

        .logo-text {
            padding-left: 10px;
            padding-right: 10px;
            color: rgba(255, 255, 255, .8);
            height: 49px;
            font-weight: 300;
            line-height: 50px;
            font-size: 18px;
            text-align: center;
        }

        th, td {
            white-space: nowrap;
        }

        tr.active {
            border-left: 3px solid #fdc00f;
        }

        table {
            font-size: 12px;
        }

        .user-area ul {
            padding-left: 20px;
        }

        .user-area li {
            cursor: pointer;
            padding: 2px 0;
        }

        .user-area li a {
            display: block;
        }

        .user-area li.active {
            font-weight: bold;
            color: red;
        }

        .user-area li.active a {
            color: red;
        }

        .role-area tr td a {
            display: block;
        }

        .role-area tr.active {
            background-color: #f1f7fd;
            border-left: 3px solid #fdc00f;
        }

        .panel-body {
            font-size: 10px;
        }

        .permission-area tr.root {
            background-color: #f1f7fd;
        }

        .permission-area tr.root td i {
            margin: 3px;
        }

        .permission-area .node {

        }

        .permission-area .node input[type='checkbox'] {
            margin: 0 5px;
        }

        .permission-area .node .parent {
            padding: 5px 0;
        }

        .permission-area .node label {
            font-weight: normal;
            margin-bottom: 0;
            font-size: 10px;
        }

        .permission-area .node .children {
            padding: 0 0 0 20px;
        }

        .permission-area .node .children .child {
            display: inline-block;
            margin: 2px 5px;
        }

        .select-help {
            float: right;
        }

        .select-help label {
            font-weight: normal;
            cursor: pointer;
        }

        .select-help .check-all {
            float: left;
            display: inline-block;
            margin-right: 8px;
        }

        .fixed-table-body {
            height: 70% !important;
        }

        .panel-heading{
            font-size: 12px;
        }

        html {
            overflow-y: auto !important;
        }

    </style>
{% endblock %}

{% block content %}
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#fa-icons" data-toggle="tab">权限列表</a></li>
                    </ul>
                    <div class="tab-content ">
                        <div class="tab-pane active mailbox-messages" id="fa-icons">
                            <div class=" mailbox-messages">
                                <div class="luffy-container">
                                    <!--用户信息-->
                                    <div class="col-md-2 user-area">
                                        <div class="panel panel-default">
                                            <div class="panel-heading">
                                                <i class="fa fa-book" aria-hidden="true"></i>用户信息
                                            </div>
                                            <div class="panel-body">
                                                <ul>
                                                    <!--需要加单引号，否则是数字类型，需要的是字符串类型, 或者在事件写==,js
                                                    是弱类型语言-->
                                                    {% for c in cobj %}
                                                        <li><a
                                                                onclick="AlterUser(this, '{{ c.customerid }}')">{{ c.customername }}</a>
                                                        </li>
                                                    {% endfor %}
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <!--角色信息-->
                                    <div class="col-md-3 role-area">
                                        <form>
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <i class="fa fa-gavel" aria-hidden="true"></i>角色信息
                                                    <button id="rolesave" class="right btn btn-success btn-xs"
                                                            style="padding: 2px 8px;float: right;display: none"
                                                            type="button">
                                                        <i class="fa fa-save" aria-hidden="true"></i>
                                                        保存
                                                    </button>
                                                </div>
                                                <div class="panel-body" style="color: #9d9d9d;">
                                                    提示：点击用户后才能为其分配角色
                                                </div>
                                                <table class="table">
                                                    <thead>
                                                    <tr>
                                                        <th>角色</th>
                                                        <th>选项</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    {% for r in robj %}
                                                        <tr>
                                                            <td>
                                                                <a onclick="AlterRole(this, '{{ r.id }}')"
                                                                   style="cursor: pointer">{{ r.title }}</a>
                                                            </td>
                                                            <td><input type="checkbox" name="roles" class="minimal"
                                                                       value="{{ r.id }}"></td>
                                                        </tr>
                                                    {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </form>
                                    </div>
                                    <!--权限信息-->
                                    <div class="col-md-7 permission-area">
                                        <form>
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    <i class="fa fa-gavel" aria-hidden="true"></i>权限分配
                                                    <button id="permissionsave" class="right btn btn-success btn-xs"
                                                            style="padding: 2px 8px;float: right;display: none"
                                                            type="button">
                                                        <i class="fa fa-save" aria-hidden="true"></i>
                                                        保存
                                                    </button>
                                                </div>
                                                <div class="panel-body" style="color: #9d9d9d;">
                                                    提示：点击角色后才能为其分配权限
                                                </div>

                                                <table class="table">  <!--三层循环展示该区域-->
                                                    <tbody>
                                                    {% for DictItem in resList %}
                                                        {% for key,DictItemValue in DictItem.items %}
                                                            {#value::[{'用户列表1': ['用户添加1', '用户删除1', '用户修改1']}, {'用户列表2': ['用户添加2', '用户删除2', '用户修改2']}]#}
                                                            <tr class="root">
                                                                <td>
                                                                    <i class="fa fa-caret-down" aria-hidden="true"></i>
                                                                    {{ key }}
                                                                    <div class="select-help">
                                                                        <div class="check-all">
                                                                            <label for="check_all_1">全选</label>
                                                                            <input id="check_all_1" class="minimal"
                                                                                   type="checkbox">
                                                                        </div>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            <tr class="node">
                                                                <td>
                                                                    {% for amg_dict in DictItemValue %}
                                                                        {% for key,values in amg_dict.items %}
                                                                            <div class="parent">
                                                                                <input class="minimal"
                                                                                       value="{{ key }}"
                                                                                       type="checkbox"
                                                                                       name="permissions">

                                                                                <label for="permission_1">{{ key }}</label>
                                                                            </div>
                                                                            <div class="children">
                                                                                <div class="row">
                                                                                    {% for foo in values %}
                                                                                        <div class="col-xs-4">
                                                                                            <div class="child"
                                                                                                 style="text-align: center;">
                                                                                                <input class="minimal"
                                                                                                       name="permissions"
                                                                                                       type="checkbox"
                                                                                                       value="{{ foo }}">
                                                                                                <label for="permission_17">{{ foo }}</label>
                                                                                            </div>
                                                                                        </div>
                                                                                    {% endfor %}
                                                                                </div>
                                                                            </div>
                                                                        {% endfor %}
                                                                    {% endfor %}
                                                                </td>
                                                            </tr>
                                                        {% endfor %}
                                                    {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="glyphicons">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

{% endblock %}

{% block scripts %}

    <script>
        $('.form_date').datetimepicker({
            minView: "month",
            language: "zh-CN",
            sideBySide: true,
            format: 'yyyy-mm-dd',
            bootcssVer: 3,
            autoclose: true,
            pickerPosition: "bottom-left",
            todayBtn: true,
            weekStart: 1,
        });


        $(document).on("mouseenter", '.mypopover', function () {
            var _this = this;   // 这里的this触发的dom,需要存起来 否则在下面 .popover的逻辑中this会变为弹出的dom
            $(this).popover("show");
            $(".popover").on("mouseleave", function () {
                $(_this).popover('hide');
            });
        });

        $(document).on("mouseleave", '.mypopover', function () {
            var _this = this;
            setTimeout(function () {
                if (!$(".popover:hover").length) {
                    $(_this).popover("hide");
                }
            }, 100);
        });


        $('.tableScroll').DataTable({
            "scrollX": true,
            "ordering": false,
            "info": false,
            "bFilter": false,
            "autoWidth": true,
            "scrollY": "450px",
            "scrollCollapse": true,
            "paging": false,

            "zeroRecords": "没有内容",

        })

        //点击用户，后台发送get请求，返回角色信息，渲染到页面上
        function AlterUser(obj, id) {
            //移除点击角色后的样式
            $("tr").removeClass("active")
            //先移除红色的css，然后在赋值红色的css
            $(obj).parent().parent().children().removeClass("active")
            $(obj).parent().addClass('active')
            $('input[name="roles"]').removeAttr('checked')
            $('input[name="permissions"]').removeAttr('checked')
            //将角色id值传给权限的保存按钮
            $("#rolesave").attr('name', id)
            //flag用于表示，这是点击角色发送的get请求
            $('#permissionsave').css('display', 'none')
            $('#rolesave').css('display', 'block')
            $.get("{% url 'Rbac:permission_modify' %}", {'flag': 'user', 'id': id}, function (r) {
                {#$(obj).addClass('user-active')#}
                for (let i = 0; i < r.length; i++) {
                    $("input[name='roles']").each(function () {
                        if ($(this).val() == r[i]) {
                            $(this).attr("checked", "checked")
                        }
                    })
                }
            });
        }

        //角色点击保存，往后端发送post请求
        $("#rolesave").click(function () {
            var roleList = Array()
            $("input[name='roles']").each(function () {
                if ($(this).is(":checked")) {
                    roleList.push($(this).val())
                }
            })
            $.ajax({
                url: "{% url 'Rbac:permission_modify' %}",
                type: "POST",
                async: false,
                data: {'id': $("#rolesave").attr('name'), 'role': JSON.stringify(roleList)},
                success: function (r) {
                    if (r == 'y') {
                        window.location.reload();
                    } else {
                        alert(r);
                        window.location.reload();
                    }
                }
            })
        })

        //点击角色，后台发送get请求，返回权限信息，渲染到页面上
        function AlterRole(obj, id) {
            //移除点击用户的样式
            $("li").removeClass("active")
            //先移除红色的css，然后在赋值红色的css
            $(obj).parent().parent().parent().children().removeClass("active")
            $(obj).parent().parent().addClass('active')
            $('input[name="roles"]').removeAttr('checked')
            $('input[name="permissions"]').removeAttr('checked')
            //将id值传给角色的保存按钮
            $("#permissionsave").attr('name', id)
            //flag用于表示，这是点击角色发送的get请求
            $('#rolesave').css('display', 'none')
            $('#permissionsave').css('display', 'block')
            $.get("{% url 'Rbac:permission_modify' %}", {'flag': 'role', 'id': id}, function (r) {
                {#$(obj).addClass('user-active')#}
                for (let i = 0; i < r.length; i++) {
                    $("input[name='permissions']").each(function () {
                        if ($(this).val() == r[i]) {
                            $(this).attr("checked", "checked")
                        }
                    })
                }
            });

        }


        //权限点击保存，往后端发送post请求
        $("#permissionsave").click(function () {
            {#window.location.reload()#}
            var permissionList = Array()
            $("input[name='permissions']").each(function () {
                if ($(this).is(":checked")) {
                    permissionList.push($(this).val())
                }
            })
            $.ajax({
                url: "{% url 'Rbac:permission_modify' %}",
                type: "POST",
                data: {'id': $("#permissionsave").attr('name'), 'perm': JSON.stringify(permissionList)},
                success: function (r) {
                    if (r == 'y') {
                        window.location.reload();
                    } else {
                        alert(r)
                    }

                    {#window.location.href = "{% url 'Rbac:permissionList' %}";#}
                }

            })
        })
    </script>

    <script type="text/javascript">
        $(function () {
            $('.check-all input:checkbox').change(function () {
                $(this).parents('.root').next().find(':checkbox').prop('checked', $(this).prop('checked'));
            })
        })


    </script>


{% endblock %}